<template>
  <div class="photoinfo-container">
    <h3 class="title">{{photoinfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间:{{photoinfo.add_time | dateFormat}}</span>
      <span>点击:{{photoinfo.click}}次</span>
    </p>

    <hr>

    <!-- 缩略图区域 -->
    <!-- <div class="thumbs">
      <img class="preview-img" v-for="(item,index) in list" :src="item.src" height="100" @click="$preview.open(index,list)" :key="item.src">
    </div> -->
    <vue-preview :slides="list" @close="handleClose" class="preview-img"></vue-preview>

    <!-- 图片内容区域 -->
    <div class="content" v-html="photoinfo.content"></div>

    <!-- 放置一个现成的评论子组件 -->
    <cmt-box :id="this.id"></cmt-box>
  </div>
</template>

<script>
// 1.导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
  data(){
    return{
      id:this.$route.params.id, // 从路由中获取到的图片Id
      photoinfo:{}, // 图片详情
      list:[], // 缩略图的数组
      src:'',
      msrc:''
    }
  },
  created(){
    this.getPhotoInfo();
    this.getThumbs();
  },
  methods:{
    getPhotoInfo(){
      // 获取图片的详情
      this.$http.get('api/getimageinfo/'+this.id).then(result=>{
        if(result.body.status===0){
          this.photoinfo=result.body.message[0];
        }
      })
    },
    getThumbs(){
      // 获取缩略图
      this.$http.get('api/getthumimages/'+this.id).then(result=>{
        if(result.body.status===0){
          // 循环每个图片数据，补全图片的宽和高
          result.body.message.forEach(item=>{
            item.w=600;
            item.h=400; 
            item.src=item.src;
            item.msrc=item.src;
          })
          // 把完整的数据保存到list中
          this.list=result.body.message;
        }
      })
    },
    handleClose(){
      console.log('close event');
    }
  },
  components:{ 
    // 注册评论子组件
    'cmt-box':comment
  }
}
</script>

<style lang="scss">
  .photoinfo-container{
    padding: 3px;
    .title{
      color: #26a2ff;
      font-size: 15px;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle{
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }

    .content{
      font-size: 13px;
      line-height: 30px;
    }

    figure{
      display: inline-block;
      margin: 10px;
    }

    figure img{
      width: 100px !important;
    }
  }
</style>